<template>
  <q-page class='fit column q-pa-md q-gutter-y-md flex flex-center'>
    <q-card class='fit' bordered>
      <q-form class='row q-pa-md q-gutter-md' @submit='submit'>
        <q-input v-model='state.goodsName' label='货物名称' :rules='rules.goodsName' class='short' />
        <q-select v-model='state.goodsType' label='货物类型' :options='typeOptions'
                  :rules='rules.goodsType' class='short' emit-value map-options />
        <q-input v-model.number='state.goodsVolume' label='货物体积（m³）'
                 :rules='rules.goodsVolume' class='short' />
        <q-input v-model.number='state.goodsWeight' label='货物重量（kg）'
                 :rules='rules.goodsWeight' class='short' />
        <q-input v-model.number='state.goodsValue' label='预估价格（￥）'
                 :rules='rules.goodsValue' mask='#.##' reverse-fill-mask class='short' />
        <q-input v-model='state.receiverUsername' label='收货人用户名'
                 :rules='rules.receiverUsername' class='short' />
        <AddressInput v-model:address='state.originLocation' send-or-receive='寄件方'
                      v-model:latitude='state.originLat' v-model:longitude='state.originLng' />
        <AddressInput v-model:address='state.destinationLocation' send-or-receive='收件方'
                      v-model:latitude='state.destinationLat' v-model:longitude='state.destinationLng' />
        <div class='flex flex-center fit'>
          <q-checkbox v-model='read' label='我已阅读过' />
          <q-btn flat dense label='《寄件须知》' to='/home' target='_blank'
                 class='text-primary' />
        </div>
        <div class='flex flex-center fit'>
          <q-btn color='primary' label='确 定' size='lg' type='submit'
                 style='width: 100px' />
        </div>
      </q-form>
    </q-card>
  </q-page>
</template>

<script lang='ts'>
import { FieldRule, SubmitOrder } from 'app/typings';
import { defineComponent, ref } from 'vue';
import { required } from 'src/services/validator';
import AddressInput from 'components/AddressInput.vue';
import { Notify } from 'quasar';
import { setMessages, submitOrder } from 'src/services/api';
import { useRouter } from 'vue-router';

const typeOptions = [{
  label: '日用品',
  value: 'DAILY'
}, {
  label: '食品',
  value: 'FOODS'
}, {
  label: '文件',
  value: 'FILES'
}, {
  label: '衣物',
  value: 'CLOTHES'
}, {
  label: '数码产品',
  value: 'DIGITALS'
}, {
  label: '其他',
  value: 'OTHERS'
}];
export default defineComponent({
  name: 'AddOrder',
  components: { AddressInput },
  setup() {
    const router = useRouter();
    const state = ref<SubmitOrder>({
      destinationLat: 0,
      destinationLng: 0,
      destinationLocation: '',
      goodsName: '',
      goodsType: '',
      goodsValue: 0,
      goodsVolume: 0,
      goodsWeight: 0,
      originLat: 0,
      originLng: 0,
      originLocation: '',
      receiverUsername: ''
    });
    const rules: Partial<Record<keyof SubmitOrder, FieldRule<number | string>[]>> = {
      goodsName: [val => required(val, '请输入货物名称')],
      goodsWeight: [val => required(val, '请输入货物重量')],
      goodsVolume: [val => required(val, '请输入货物体积')],
      goodsType: [val => required(val, '请选择货物类型')],
      receiverUsername: [val => required(val, '请输入收货人用户名')],
      destinationLocation: [val => required(val, '请输入收货地址')],
      originLocation: [val => required(val, '请输入寄货地址')],
      goodsValue: [val => required(val, '请输入预估价格')]
    };
    const read = ref(false);

    const submit = async () => {
      if (read.value) {
        try {
          const response = await submitOrder(state.value);
          if (response.status === 0) {
            Notify.create({ message: '订单提交成功！', type: 'positive', position: 'top' });
            setTimeout(() => {
              return;
            }, 1000);
            await router.replace('/orders');
            await setMessages();
          } else {
            Notify.create({ message: response.msg, type: 'negative', position: 'top' });
          }
        } catch (error) {
        }
        return true;
      } else {
        Notify.create({ message: '请先阅读寄件须知！', type: 'negative', position: 'top' });
        return false;
      }
    };
    return {
      state,
      rules,
      typeOptions,
      read,
      submit
    };
  }
});
</script>
<style scoped lang='scss'>
.short {
  width: 32%;
}

.q-btn {
  padding-left: 0;
  margin-left: 0;
  padding-right: 0;
  margin-right: 0;
}
</style>
